<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>smartcrop.js 内容感知图像裁剪</title>
</head>

<body>
    <img class="img" src="./2.jpg" alt="">
    <!-- <img class="img" src="https://i.loli.net/2019/08/29/cmeto3P5d8xln4S.jpg" crossorigin="anonymous" alt="[图片丢失]" /> -->
    <hr>
    <canvas style="background-color: #000;"></canvas>
    <script src="smartcrop.js"></script>
    <script>
        const image = document.querySelector(".img");
        const c = document.querySelector("canvas");
        const ctx = c.getContext("2d");

        image["onload"] = function () {
            smartcrop
                .crop(image, {
                    minScale: 0.5,
                    width: 100,
                    height: 100,
                    debug: true
                })
                .then(
                    function (res) {
                       console.log(res);
                        const {
                            x,
                            y,
                            width,
                            height
                        } = res.topCrop;
                        c.width = width;
                        c.height = height;
                        ctx.drawImage(image, x, y, width, height, 0, 0, width, height);
                    },
                    function (err) {
                        console.log(err);
                    }
                );
        };
    </script>
</body>

</html>